<script setup lang="ts">
/* 原始逻辑完全保留 */
import {NCard, NDataTable, NDropdown, NButton, NSpace} from 'naive-ui'
import {useContextMenu} from '@/composables/useContextMenu'
import type {DataTableColumns} from 'naive-ui'

defineOptions({name: 'BaseCrudPage'})

const props = defineProps<{
  loading?: boolean
  data: any[]
  columns: DataTableColumns
  pagination: any
  tableConfig?: any
  contextMenuOptions?: any[],
  rowKey: (row: any) => number | string
}>()

const emit = defineEmits<{
  'update:page': [page: number]
  'menu-select': [key: string, option: any]
}>()

// 右键菜单逻辑保持不变
const {
  showDropdown,
  x,
  y,
  selectedRow,
  rowProps,
  handleSelect,
  onClickOutside
} = useContextMenu()

function onMenuSelect(key: string, option: any) {
  if (selectedRow.value) {
    option.onClick?.(selectedRow.value)
  }
  handleSelect(key)
}
</script>

<template>
  <div class="base-crud-page">
    <n-card>
      <!-- 搜索区域结构不变 -->
      <div class="search-area">
        <slot name="search"/>
      </div>

      <!-- 数据表格保持原有props -->
      <n-data-table
        :loading="loading"
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :row-key="rowKey"
        :row-props="rowProps"
        v-bind="tableConfig"
        :max-height="tableConfig.maxHeight"
        :min-height="tableConfig.minHeight"
        @update:page="(page) => emit('update:page', page)"
      />
    </n-card>

    <!-- 右键菜单保持不变 -->
    <n-dropdown
      v-if="contextMenuOptions"
      placement="bottom-start"
      trigger="manual"
      :x="x"
      :y="y"
      :options="contextMenuOptions"
      :show="showDropdown"
      :on-clickoutside="onClickOutside"
      @select="onMenuSelect"
    />

    <!-- 弹窗区域 -->
    <slot name="modal"/>
    <slot name="model_other"/>
  </div>
</template>

<style scoped>
/* ============= 极简留白版样式 ============= */
.base-crud-page {
  padding: 24px;
  min-height: 100vh;
  background: #f8f9fa; /* 浅灰背景 */
}

/* 卡片基础样式 */
:deep(.n-card) {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* 搜索区域间距 */
.search-area {
  margin-bottom: 5px;
}

/* ============= 表格优化 ============= */
:deep(.n-data-table) {
  border: 1px solid rgba(0, 0, 0, 0.04);
}

:deep(.n-data-table-th) {
  background: #f8f9fa !important; /* 浅灰表头 */
  color: #212529 !important; /* 深色文字 */
}

:deep(.n-data-table-td) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}

/* ============= 按钮简化 ============= */
:deep(.n-button) {
  background: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #495057;
  transition: all 0.2s ease;
}

:deep(.n-button:hover) {
  background: #e9ecef;
  transform: none; /* 移除位移动画 */
}

/* ============= 布局优化 ============= */
:deep(.n-card__content) {
  padding: 4px !important;
  display: flex;
  flex-direction: column;
  gap: 4px; /* 统一间距 */
}

:deep(.n-pagination) {
  margin-top: 5px;
  justify-content: flex-end;
}

/* 右键菜单简化 */
:deep(.n-dropdown-menu) {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

:deep(.n-dropdown-option) {
  color: #495057 !important;
  padding: 8px 16px;
}

:deep(.n-dropdown-option:hover) {
  background: #f8f9fa !important;
  transform: none; /* 移除位移动画 */
}

/* 全局补充（可选） */
body {
  font-family: -apple-system, system-ui;
  line-height: 1.6;
  color: #212529;
}

/* 表格行高优化 */
:deep(.n-data-table-tr) {
  height: 52px; /* 默认48px */
}

/* 输入框统一风格 */
:deep(.n-input) {
  border-radius: 6px;
  border-color: rgba(0, 0, 0, 0.08);
}
</style>
